import AuthToken from '@/layouts/AuthToken';
import Layout from '@/layouts';

import { Navigate } from 'react-router-dom';
import { Suspense, lazy } from 'react';
import PageLoading from '@/layouts/PageLoading';

// 定义一个函数，根据路径返回导入的模块
// function dynamicImport(path) {
//   return import(`../pages/${path}`).then(
//     (module) =>
//       // 这里可以返回模块中特定的导出，或者返回整个模块
//       module.default, // 假设模块默认导出一个组件
//   );
// }
// 懒加载
const LazyLoad = (path: string) => {
  const Comp = lazy(() => import(`../pages/${path}`));
  return (
    <Suspense fallback={<PageLoading />}>
      <Comp></Comp>
    </Suspense>
  );
};

// 路由
export const MenuRoutes = [
  {
    path: 'home/workplace',
    element: LazyLoad('Home'),
    name: '首页',
    meta: {
      title: '首页',
      icon: 'home',
      isAffix: true,
    },
  },
  {
    path: 'component',
    name: '组件',
    meta: {
      title: '组件',
      icon: 'icon',
    },
    children: [
      {
        path: '',
        element: <Navigate to='/component/icon/svg' />,
        meta: {
          hidden: true,
        },
      },
      {
        path: 'icon/svg',
        name: 'SVG图标',
        element: LazyLoad('component/icon/svg'),
        meta: {
          icon: 'icon',
          title: 'SVG图标',
        },
      },
    ],
  },

  {
    path: '404',
    element: LazyLoad('404'),
    meta: {
      title: '404',
      noLogin: true,
      icon: 'icon',
    },
  },
];

const routes = [
  {
    path: '/',
    element: <Navigate to='/home/workplace' />,
  },
  {
    path: '/',
    element: (
      <AuthToken>
        <Layout />
      </AuthToken>
    ),
    children: MenuRoutes,
  },
  {
    path: '/login',
    name: '登录',
    element: '',
    meta: {
      title: '登录',
      noLogin: true,
    },
  },
  {
    path: '*',
    element: <Navigate to='/404' />,
  },
];

export default routes;
